/**
 * Created with JetBrains PhpStorm.
 * User: vander
 * Date: 5/7/13
 * Time: 11:24 PM
 * To change this template use File | Settings | File Templates.
 */
var ElementsView = Class.create({
    initialize: function(containerId){

        this.targetPage = null;
        this.divTag = new Element("ul", {class: "elements-view-ul"});
        $j("#" + containerId).append(this.divTag);
    },
    load: function(page){
        var _this = this;
        this.targetPage = page;
        var _divTag = this.divTag;
        $j(_divTag).empty();
        for(var i = 0; i < page.elements.length; i++){
            var newItem = new Element("li");
            if(page.elements[i].className == "MyImage"){
                $j("<img>").attr("src", "menu/icon/Pictures-icon.png").appendTo(newItem);
            }
            else if(page.elements[i].className == "MyText"){
                $j("<img>").attr("src", "menu/icon/text-icon.png").appendTo(newItem);
            }
            else if(page.elements[i].className == "MyVideo"){
                $j("<img>").attr("src", "menu/icon/video-icon.png").appendTo(newItem);
            }
            else if(page.elements[i].className == "MyAudio"){
                $j("<img>").attr("src", "menu/icon/audio-icon.png").appendTo(newItem);
            }

            $j("<span></span>").html(page.elements[i].id).appendTo(newItem);
            if(page.elements[i].id == Global.currentSelectedEle)
                $j(newItem).addClass("element-view-item-selected");
            $j(newItem).on("click", function(event){

                var selectedEle = $j(this).find('span').html();
                if(selectedEle != Global.currentSelectedEle){
                    $j("#"+selectedEle).click();
                }
                    _this.reload();
            });
            $j(_divTag).append(newItem);
        }
    },
    reload: function(){
        if(this.targetPage != null){
            this.load(this.targetPage);
        }
    },
    clear: function(){
        $j(this.divTag).empty();
        this.targetPage = null;
    }
});